<template>
  <div>
    <div class="topSearch">
      <div>
        <el-button style="background-color:#303e9d;color: #eeeeee" size="small" @click="_add"><i
            class="el-icon-plus"></i>添加计划
        </el-button>
        <!--        <el-button style="" size="small"><i class="el-icon-copy-document"></i>批量操作</el-button>-->
      </div>
      <div>
        <el-button-group size="small">
          <el-button size="small" @click="getSates('1')">已提醒</el-button>
          <el-button size="small" @click="getSates('0')">未提醒</el-button>
        </el-button-group>
        <el-select size="small" style="width: 200px;margin-left: 10px" v-model="selectOpt">
          <el-option value="1" label="全部"></el-option>
        </el-select>
        <el-input placeholder="按任务名称搜索" v-model="params.autoPatrolConfigName" suffix-icon="el-icon-search" size="small"
                  style="width: 200px;margin-left: 10px" @keyup.enter.native="searchFn"></el-input>
      </div>
    </div>
    <div class="centerBar" style="margin-top: 10px">
      <el-table :data="data">
        <!--        <el-table-column type="expand">-->
        <!--          <template slot-scope="props">-->
        <!--            <el-form label-position="left" inline class="demo-table-expand">-->
        <!--              <el-form-item label="巡查模板" label-width="180px">-->
        <!--                <span>通用日常模板</span>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="任务生成时间" label-width="180px">-->
        <!--                <span>2025/05/12 10:00</span>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="任务执行时数" label-width="180px">-->
        <!--                <span>3天</span>-->
        <!--              </el-form-item>-->
        <!--            </el-form>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="autoPatrolConfigName" label="计划名称" width="300px"></el-table-column>
        <el-table-column label="计划状态">
          <template v-slot:default="scope">
            <div class="s" style="" v-if="scope.row.isRemind==0">未提醒</div>
            <div class="s" style="background-color:#606266;" v-if="scope.row.isRemind==1">提醒</div>
          </template>
        </el-table-column>
        <el-table-column prop="templateName" label="模板名称"></el-table-column>
        <el-table-column label="有效期">
          <template v-slot:default="scope">
            <div>{{ scope.row.startTime + '~' + scope.row.endTime }}</div>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="d" label="循环方式">-->
        <!--          <template v-slot:default="scope">-->
        <!--            <div class="s" style="">{{ scope.row.d }}</div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="巡查方式">
          <template v-slot:default="scope">
            <div class="s" style="">线上</div>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="f" label="上次修改"></el-table-column>-->
        <el-table-column prop="createPerson" label="创建人"></el-table-column>
        <el-table-column prop="d" label="操作">
          <template v-slot:default="scope">
            <el-link icon="el-icon-delete" @click="deleteCateName(scope.row.autoPatrolConfigId)"></el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <configuration-add ref="conAdd" @addStatus="receiveMessage"></configuration-add>
  </div>
</template>

<script>
import configurationAdd from "./componentDialog/configurationAdd.vue";

export default {
  name: "planConfiguration",
  components: {
    configurationAdd
  },
  data() {
    return {
      data: [],
      currentPage: 1,
      selectOpt: '1',
      total: 0,
      assignName: "",
      params: {
        pageNumber: 1,
        pageSize: 20,
        isRemind: "",
        autoPatrolConfigName: "",
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    searchFn() {
      this.params.pageNumber = 1
      this.params.pageSize = 2
      this.getData()
    },
    getSates(val) {
     this.params.isRemind=val
      this.getData()
    },
    getData() {
      const params = {
        pageNumber: this.params.pageNumber,
        pageSize: this.params.pageSize,
        autoPatrolConfigName: this.params.autoPatrolConfigName,
        isRemind: this.params.isRemind
      }
      this.$api.inspectionTaskGetAutoPatrolConfigList(params).then(res => {
        this.data = res.data
        this.total = res.total
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getData()
    },
    _add() {
      this.$refs.conAdd.handleOpen()
    },
    receiveMessage(val) {
      if (val == 1) {
        this.getData()
      }
    },
    deleteCateName(id) {
      this.$confirm('删除此巡查计划，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          autoPatrolConfigId: id
        }
        this.$api.inspectionTaskDeleteAutoPatrol(data).then(res => {
          if (res == 1) {
            this.$message.success('删除成功')
            this.getData()
          } else {
            this.$message.error('删除失败')
          }
        })
      })
    },
  }
}
</script>

<style scoped lang="less">
.topSearch {
  display: flex;
  justify-content: space-between;
}

.s {
  width: 50px;
  height: 20px;
  background-color: #13ce66;
  text-align: center;
  color: #eeeeee;
  font-size: 12px;
  line-height: 20px;
  border-radius: 5px;
}
</style>